<template>
  <div class="CareerPlan">
    <div class="CareerPlan_boxtop">
      <div class="CareerPlan_top">
        <div class="CareerPlan_top_box">
          <router-link to="/">
            <img
              class="CareerPlan_top_logo"
              src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/156222927235720190704163413.jpg"
              alt
            />
          </router-link>

          <div class="CareerPlan_top_content">新手教程</div>
        </div>
      </div>
    </div>
    <div class="CareerPlan_bottom">
      <div class="CareerPlan_boxbottom">
        <div class="CareerPlan_bottom_option">
          <router-link to="/">
            <span>首页</span>
          </router-link>
          <span>></span>
          <span>新手教程</span>
        </div>
        <div class="big_box">
          <div class="contentbox">
            <div class="content">
              <p class="big">慧择云志愿新手教程电脑版</p>
              <p>第一步，进入慧择云志愿官网，点击登录</p>
            </div>
            <div class="img">
              <img class="image" :src="HttpURL.URLimg01" alt />
            </div>
          </div>

          <div class="contentbox">
            <div class="content">
              <p>第二步，输入您的手机号及验证码，点击“快捷登录”</p>
            </div>
            <div class="img">
              <img class="image" :src="HttpURL.URLimg02" alt />
            </div>
          </div>

          <div class="contentbox">
            <div class="content">
              <p>第三步，输入您的高考省份、高考年份、文理科、分数、排名信息，排名暂时不清楚的可不填，点击提交</p>
            </div>
            <div class="img">
              <img class="image" :src="HttpURL.URLimg03" alt />
            </div>
          </div>

          <div class="contentbox">
            <div class="content">
              <p>第四步，填报志愿，有以下4种方式进行填报</p>
              <p>①智能填报志愿</p>
              <p>系统可根据您输入的高考信息，自动生成符合您成绩的志愿表</p>
            </div>
            <div class="img">
              <img class="image" :src="HttpURL.URLimg04" alt />
            </div>
          </div>

          <div class="contentbox">
            <div class="content">
              <p>②院校优先填报</p>
              <p>根据“冲、稳、保”三个梯度中推荐的信息自行选择院校进行填报</p>
            </div>
            <div class="img">
              <img class="image" :src="HttpURL.URLimg05" alt />
            </div>
          </div>

          <div class="contentbox">
            <div class="content">
              <p>③专业优先填报</p>
              <p>添加您的意向专业，从“冲、稳、保”三个梯度中推荐的信息自行选择院校进行填报</p>
            </div>
            <div class="img">
              <img class="image" :src="HttpURL.URLimg06" alt />
            </div>
          </div>

          <div class="contentbox">
            <div class="content">
              <p>④手动填报志愿</p>
              <p>选择您成绩所在的批次，自行选择院校及专业生成志愿表。</p>
            </div>
            <div class="img">
              <img class="image" :src="HttpURL.URLimg07" alt />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TestQuestion",
  data() {
    var HttpURL = "https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/";
    return {
      HttpURL: {
        URLimg01: HttpURL + "1576220200029xs1.png",
        URLimg02: HttpURL + "1576220316165xs2.png",
        URLimg03: HttpURL + "1576220402572xs3.png",
        URLimg04: HttpURL + "1576220541220xs4.png",
        URLimg05: HttpURL + "1576220697145xs5.png",
        URLimg06: HttpURL + "1576220741189xs6.png",
        URLimg07: HttpURL + "1576220771662xs7.png"
      }
    };
  },
  methods: {},

  beforeCreate() {
    this.$nextTick(() => {});
  }
};
</script>
<style lang="scss" scoped>
.CareerPlan {
  background-color: #f6f6f6;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  .CareerPlan_boxtop {
    background-color: #ffffff;
    height: 68.6px;
    .CareerPlan_top {
      margin: 0 auto;
      width: 1200px;
      height: 68.6px;
      .CareerPlan_top_box {
        width: 170.6px;
        height: 68.6px;
        .CareerPlan_top_logo {
          width: 50px;
          padding-top: 12.5px;
          margin-right: 24px;
        }
        .CareerPlan_top_content {
          display: inline;
          font-size: 22px;
          color: #515151;
          float: right;
          line-height: 68.6px;
        }
      }
    }
  }
  .CareerPlan_bottom {
    width: 100%;
    background-color: #f6f6f6;
    .CareerPlan_boxbottom {
      width: 1200px;
      margin: 0 auto;
      .CareerPlan_bottom_option {
        padding-top: 27px;
        span {
          color: #757575;
          font-size: 15px;
        }
      }
      .big_box {
        margin-top: 30px;
        margin-bottom: 80px;
        .contentbox {
          margin-bottom: 30px;
          .content {
            margin-bottom: 30px;
            .big {
              font-size: 27px;
              text-align: center;
              margin-bottom: 40px;
            }
            p {
              line-height: 40px;
              font-size: 20px;
            }
          }
          .img {
            .image {
              width: 1200px;
            }
          }
        }
      }
    }
  }
}
.router-link-active {
  text-decoration: none;
}
</style>